<template>
  <div class="recruit-info">
    <h2>招兵买马</h2>
    <div class="exist-info">
      <h3>已发布的职位</h3>
      <ul class="exist-lists" v-show="allExistPosition.length">
        <li v-for="(item,index) in allExistPosition" :class="{'gray':!positionStatusArr[index]}">
          <div class="wrap" v-show="editDetailArr[index]">
            <div>
              <span class="title">{{item.name}}</span>
              <span class="salary">{{item.salary}}</span>
              <div class="actions">
              <span class="edit-icon" @click="actions({type:'edit',index,item})">
                编辑
                <Icon type="edit" size="14"></Icon>
              </span>
                <span class="close-icon" @click="actions({type:'del',index,item})">
                删除
                <Icon type="close" size="14"></Icon>
              </span>
                <span class="stop-icon" @click="actions({type:'stop',index,item})">
                {{positionStatusArr[index]?'暂停':'启用'}}
                <Icon type="stop" size="14"></Icon>
              </span>
              </div>
            </div>
            <div>
              <span class="address">{{item.address}}</span>
              <span class="exp-req">{{item.experience}}</span>
              <span class="edu-req">{{item.education}}</span>
              <span class="type-req">{{item.position}}</span>
              <span class="go-detail" @click="showDetail(index)">
                {{toDetailArr[index]?'收起详情':'查看详情'}}
              </span>
            </div>
            <transition name="fade" mode="in-out">
              <div class="detail" v-show="toDetailArr[index]">
                <div class="duty">
                  <span class="title">岗位职责</span>
                  <div>
                    <pre>{{item.duty}}</pre>
                  </div>
                </div>
                <div class="requirement">
                  <span class="title">任职要求</span>
                  <div>
                    <pre>{{item.skills}}</pre>
                  </div>
                </div>
              </div>
            </transition>
          </div>
          <div v-show="!editDetailArr[index]">
            <div class="edit-c">
              <Input clearable
                     style="width:250px;margin-right: 20px;"
                     placeholder="请输入岗位类型，如设计、运维、产品等等"
                     v-model="pPositionType"
              ></Input>
              <Input clearable
                     style="width:250px;margin-right: 20px;"
                     placeholder="请输入岗位名称"
                     v-model="pName"
              ></Input>
            </div>
            <div class="edit-c">
              <Select
                style="width: 250px;margin-right: 20px;"
                placeholder="请输入教育背景"
                v-model="pEducation"
              >
                <Option v-for="(item,index) in educationArr" :value="item" :key="item">{{item}}</Option>
              </Select>
              <Select
                style="width: 250px;margin-right: 20px;"
                placeholder="请输入经验要求"
                v-model="pExperience"
              >
                <Option v-for="(item,index) in experienceArr" :value="item" :key="item">{{item}}</Option>
              </Select>

            </div>
            <div class="edit-c">
              <Input clearable
                     style="width:250px;margin-right: 20px;"
                     placeholder="请手动输入薪酬范围，如10k/月,12w-30w"
                     v-model="pSalary"
              ></Input>
              <Input clearable
                     style="width:250px;margin-right: 20px;"
                     placeholder="请手动输入工作地址，如广州、深圳等等"
                     v-model="pAddress"
              ></Input>
            </div>
            <div class="edit-c">
              <h4>岗位职责</h4>
              <textarea placeholder="请手动输入岗位职责" cols="80" rows="5" v-model="pDuty"></textarea>
              <h4>任职要求</h4>
              <textarea placeholder="请手动输入任职要求" cols="80" rows="5" v-model="pRequirement"></textarea>
            </div>
            <div class="edit-c edit-btn">
              <span @click="saveEditInfo({type:'save',id:item.id,index:index})">
                  <Button type="primary">保存</Button>
              </span>
              <span @click="saveEditInfo({type:'cancel',index:index})">
                  <Button type="ghost">取消</Button>
              </span>
            </div>
          </div>
        </li>
      </ul>
      <p class="empty-pos" v-show="!allExistPosition.length">小主，暂无职位，新增一个试试～～</p>
      <div class="add-pos"
           v-show="addStatus"
      >
        <ul>
          <li>
            <div v-show="true">
              <div class="edit-c">
                <Input clearable
                       style="width:250px;margin-right: 20px;"
                       placeholder="请输入岗位类型，如设计、运维、产品等等"
                       v-model="pPositionType"
                ></Input>
                <Input clearable
                       style="width:250px;margin-right: 20px;"
                       placeholder="请输入岗位名称"
                       v-model="pName"
                ></Input>
              </div>
              <div class="edit-c">
                <Select
                  style="width: 250px;margin-right: 20px;"
                  placeholder="请输入教育背景"
                  v-model="pEducation"
                >
                  <Option v-for="(item,index) in educationArr" :value="item" :key="item">{{item}}</Option>
                </Select>
                <Select
                  style="width: 250px;margin-right: 20px;"
                  placeholder="请输入经验要求"
                  v-model="pExperience"
                >
                  <Option v-for="(item,index) in experienceArr" :value="item" :key="item">{{item}}</Option>
                </Select>

              </div>
              <div class="edit-c">
                <Input clearable
                       style="width:250px;margin-right: 20px;"
                       placeholder="请手动输入薪酬范围，如10k/月,12w-30w"
                       v-model="pSalary"
                ></Input>
                <Input clearable
                       style="width:250px;margin-right: 20px;"
                       placeholder="请手动输入工作地址，如广州、深圳等等"
                       v-model="pAddress"
                ></Input>
              </div>
              <div class="edit-c">
                <h4>岗位职责</h4>
                <textarea placeholder="请手动输入岗位职责" cols="80" rows="5" v-model="pDuty"></textarea>
                <h4>任职要求</h4>
                <textarea placeholder="请手动输入任职要求" cols="80" rows="5" v-model="pRequirement"></textarea>
              </div>
              <div class="edit-c edit-btn">
              <span @click="saveEditInfo({type:'save'})">
                  <Button type="primary">保存</Button>
              </span>
                <span @click="saveEditInfo({type:'cancel'})">
                  <Button type="ghost">取消</Button>
              </span>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div @click="addPosition" class="fl">
        <Button type="primary" icon="android-add">新增岗位</Button>
      </div>
    </div>
  </div>
</template>

<script>
  import $cache from '../../../utils/cache'
  export default {
    data() {
      return {
        allExistPosition: [],
        toDetailArr: [],
        editDetailArr: [],
        positionStatusArr: [], //职位开启/关闭状态, 1开启 0暂停
        editStatus: false, //职位是否在编辑状态
        isEditFinished: true,
        educationArr: ['全部', '博士后', '博士', 'MBA/EMBA', '硕士', '本科', '大专', '中专', '高中', '初中'],
        experienceArr: ['全部', '应届生', '1年以内', '1-3年', '3-5年', '5-10年', '10年以上'],
        pName: '',  // 以下是编辑状态时候的 职位信息pName——pRequirement
        pEducation: '',
        pExperience: '',
        pSalary: '',
        pDuty: '',
        pRequirement: '',
        pAddress: '',
        pPositionType: '', // 岗位类型，如设计、产品、技术等等
        addStatus: false, //新增岗位status
      }
    },
    methods: {
      getAllExistPositions() {
        this.$axios.post(this.$store.getters.getUrl('allExistPositions')).then(res => {
          if (res.data.error_code === 0) {
            this.allExistPosition = res.data.data ? res.data.data.rows : [];
            this.toDetailArr.length = this.allExistPosition.length;
            this.toDetailArr.fill(false);
            this.editDetailArr.length = this.allExistPosition.length;
            this.editDetailArr.fill(true);
            this.positionStatusArr.length = this.allExistPosition.length;
            this.allExistPosition.forEach((item, index) => {
              this.positionStatusArr[index] = item.status
            })
          }
        })
      },
      showDetail(index) {
        this.$set(this.toDetailArr, index, !this.toDetailArr[index])
      },
      /*
      * 1.职位--操作
      * 2.职位开启时候，才能继续操作
      * */
      actions({type, index, item}) {
        switch (type) {
          case 'del': {
            if (!this.positionStatusArr[index]) {
              this.$Message.error({
                content: '请先开启职位'
              });
              return false
            }
            this.$Modal.confirm({
              content: '确定要删除该职位',
              onOk: () => {
                this.deleteAction(item.id)
              }
            });

            break;
          }
          case 'stop': {
            this.$Modal.confirm({
              content: `确定要${(this.positionStatusArr[index] === 0) ? '启用' : '暂停'}该职位？`,
              onOk: () => {
                this.stopAction({status: [0, 1].find(x => x !== this.positionStatusArr[index]), id: item.id})
              }
            });
            break;
          }
          case 'edit':
            if (!this.positionStatusArr[index]) {
              this.$Message.error({
                content: '请先开启职位'
              });
              return false
            }
            this.$set(this.editDetailArr, index, !this.editDetailArr[index]);
            this.pName = item.name;
            this.pEducation = item.education;
            this.pExperience = item.experience;
            this.pSalary = item.salary;
            this.pDuty = item.duty;
            this.pRequirement = item.skills;
            this.pPositionType = item.position;
            this.pAddress = item.address
        }

      },
      deleteAction(id) {
        this.$axios.post(this.$store.getters.getUrl('deletePosition'), {id}).then(res => {
          if (res.data.error_code === 0) {
            this.$Message.error({
              content: '删除成功！'
            });
            this.getAllExistPositions();
          }
        })
      },
      stopAction({status, id,}) {
        this.$axios.post(this.$store.getters.getUrl('changePositionStatus'), {
          id,
          status
        }).then(res => {
          if (res.data.error_code === 0) {
            this.getAllExistPositions()
          }
        })
      },
      saveEditInfo({type, id, index}) {
        switch (type) {
          case 'cancel':
            (index !== undefined) && (this.$set(this.editDetailArr, index, !this.editDetailArr[index]), this.clearData());
            ((index === undefined) && this.clearData(), this.addStatus = false);
            break;
          case 'save':
            this.editPosition({id, index});
            this.clearData();
            break;
        }
      },
      /*
      * 1.新增与编辑 放在同一个方法里面
      * 2.两者之间额度请求参数类似
      * 3.通过是传递id来决定是否是 编辑岗位还是新增岗位
      * */
      editPosition({id, index}) {
        let data = {
            address: this.pAddress,
            duty: this.pDuty,
            name: this.pName,
            position: this.pPositionType,
            salary: this.pSalary,
            skills: this.pRequirement,
            education: this.pEducation,
            experience: this.pExperience,
          },
          requestUrl = id ? this.$store.getters.getUrl('editPosition') : this.$store.getters.getUrl('addPosition');
        let someBool = [this.pName, this.pEducation, this.pExperience, this.pSalary,
          this.pDuty, this.pRequirement, this.pPositionType, this.pAddress].some(item => !item);
        if (someBool) {
          this.$Message.error({
            content: '有必填项目未填写，请先补全！'
          });
          return false
        }
        if (id) {
          data.id = id //id不为空--编辑职位信息
        }
        if (index !== undefined) {
          data.status = this.positionStatusArr[index]
        } else {
          data.status = 1 //默认立刻启用该职位
        }

        this.$axios.post(requestUrl, data).then(res => {
          if (res.data.error_code === 0) {
            this.$Message.success({
              content: '保存成功！'
            });
            this.$set(this.editDetailArr, index, !this.editDetailArr[index]);
            this.addStatus = false;
            this.getAllExistPositions();
          }
        })
      },
      addPosition() {
        let someBool = [this.pName, this.pEducation, this.pExperience, this.pSalary,
          this.pDuty, this.pRequirement, this.pPositionType, this.pAddress].some(item => item);
        if (someBool) {
          this.$Message.error({
            content: '请先保存岗位编辑信息！'
          });
          return false
        }
        if (this.addStatus) {
          this.$Message.error({
            content: '请先保存新增岗位信息！'
          });
          return false
        }
        this.addStatus = true
      },
      clearData() {
        this.pName = '';
        this.pEducation = '';
        this.pExperience = '';
        this.pSalary = '';
        this.pDuty = '';
        this.pRequirement = '';
        this.pPositionType = '';
        this.pAddress = '';
      }
    },
    created() {
      this.getAllExistPositions()
      console.log('hhha:',$cache.get('auth'))
    },
    mounted() {
      this.$store.dispatch('setBreadcrumbInfo', [{name: '新闻'},
        {name: '新闻列表', routeName: 'NewsList'}, {name: '招聘信息'}])
    }
  }
</script>

<style lang='less' type='text/less' scoped>
  .recruit-info {
    min-height: 1000px;
    padding: 0 24px;
    background-color: #fff;
    h2 {
      height: 60px;
      line-height: 60px;
      border-bottom: 1px #ddd dashed;
    }
    h3 {
      height: 40px;
      line-height: 40px;
    }
    .exist-info {
      margin-top: 20px;
      .exist-lists, .add-pos {
        .gray {
          .wrap {
            background-color: #ececec;
          }
          .edit-icon, .close-icon {
            background-color: #ececec;
          }
        }
        > li {
          padding: 10px;
          margin-bottom: 10px;
          line-height: 30px;
          font-size: 14px;
          border-bottom: 1px #eee solid;
          .wrap {
            position: relative;
            max-width: 600px;
            padding: 0 10px;
            border-radius: 4px;
          }
          .title {
            color: #000;
          }
          .salary {
            float: right;

          }
          .address, .exp-req, .edu-req, .type-req {
            background-color: #e8e8e8;
            margin-right: 8px;
            padding: 0 5px;
            border-radius: 3px;
          }
          .go-detail {
            float: right;
            color: #00aeff;
            cursor: pointer;
          }
          .duty, .requirement {
            margin-top: 20px;
          }
          .actions {
            position: absolute;
            top: 0;
            right: -240px;
          }
          .edit-icon, .close-icon, .stop-icon {
            margin-right: 15px;
            cursor: pointer;

          }
          .edit-icon {
            > i {
              border: 1px #bbb solid
            }
          }
        }
        .edit-c {
          display: block;
          margin-bottom: 20px;
          textarea {
            padding: 10px;
            border: 1px #ddd solid;
            border-radius: 4px;
          }
        }
        .edit-btn {
          margin-left: 200px;
          button + button {
            margin-left: 20px;
          }
        }
      }
    }
    .empty-pos {
      height: 80px;
      line-height: 80px;
      margin: 20px auto;
      text-align: center;
      font-size: 18px;
      background-color: #f8f8f8;
    }
  }
</style>
